<template>
  <div class="fixed-box">
    <div class="c-box">
      <transition-group name="bubble" tag="div">
        <div
          v-for="(item, index) in displayedItems"
          :key="index"
          class="c-item"
          @click="removeBubble(index)"
        >
          <p>{{ item.name }}</p>
          <p>is conducting stock analysis.</p>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayedItems: [],
      currentIndex: 0,
    };
  },
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    intervalTime: {
      type: Number,
      default: 2000,
    },
    displayTime: {
      type: Number,
      default: 4500, // 修改为总时间1.5s + 1.5s + 1.5s = 4.5s
    },
    maxItems: {
      type: Number,
      default: 3, // 最大显示数量为3个气泡
    },
  },
  mounted() {
    this.startLoop();
  },
  methods: {
    startLoop() {
      setInterval(() => {
        if (this.displayedItems.length < this.maxItems) {
          this.showNextBubble();
        }
      }, this.intervalTime); // 每隔intervalTime毫秒尝试显示下一个气泡

      setInterval(() => {
        if (this.displayedItems.length > 0) {
          this.removeBubble(0);
        }
      }, this.displayTime); // 每隔displayTime毫秒移除第一个气泡
    },
    showNextBubble() {
      if (this.currentIndex < this.dataList.length) {
        this.displayedItems.push(this.dataList[this.currentIndex]);
        this.currentIndex++;
      } else {
        this.currentIndex = 0;
      }
    },
    removeBubble(index) {
      this.displayedItems.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.fixed-box {
  position: fixed;
  left: 10px;
  bottom: 400px;
  z-index: 999;
}

.c-box {
  display: flex;
  flex-direction: column-reverse;
}

.c-item {
  max-width: 240px;
  padding: 10px 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  border-radius: 15px;
  background-color: #1c2156;
  color: white;
  margin-bottom: 10px;
  animation: slideUpDown 4.5s ease forwards; /* 修改动画为总时间4.5s */
}

@keyframes slideUpDown {
  0%,
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
  33.33%,
  66.66% {
    transform: translateY(0);
    opacity: 1;
  }
}

.bubble-enter-active,
.bubble-leave-active {
  transition: all 0.5s;
}

.bubble-enter,
.bubble-leave-to {
  opacity: 1;
  transform: translateY(0);
}

.bubble-leave,
.bubble-enter-to {
  opacity: 0;
  transform: translateY(-100%);
}
</style>
